<template>
  <view class="unit-card">
    <view class="item_title f_row_center" style="background: #DBE9FD;border-radius: 8rpx;padding: 10rpx">
      <image src="/static/title_house.png" style="height: 38rpx;width: 38rpx;margin-right: 10rpx" />
      {{ item.roomname }} <span style="color: #4575F2;font-size: 24rpx;margin-left: 20rpx">{{ item.area }}m²</span>
      <view class="flex_1"></view>
      <span class="item-type-btn" :style="{'background':color}"> {{item.typename}}</span>
    </view>
    <view v-if="listName.length>0" class="f_row item_text" style="line-height: 26rpx">
      <item-content-view :list="listName"/>
    </view>
    <view v-else style="font-size: 24rpx">
        {{item.stypename}}
    </view>
  </view>
</template>

<script lang="ts">
import {Vue, Component, Prop} from "vue-property-decorator";
import ItemContentView from "@/pages/data/components/item_content_view.vue";
import {mixins} from "vue-class-component";
import TypeConfig from "@/mixins/TypeConfig";

@Component({
  components: {
    ItemContentView,
  }
})
export default class ItemHouseLevelCardView extends mixins(TypeConfig, Vue,) {
  @Prop() item?: any;

   get color(){
     return this.roomType[this.item.roomtype]
   }
  get listName() {
    let list: any =     [
    ];
    this.item.users.forEach((item: any) => {
      list.push({
        img:'/static/unit_u.png',
        title: '',
        content: `${item.dept + item.username}(${item.profess})`,
      })
    });
    return list;
  }

}
</script>

<style scoped>
.unit-card {
  box-shadow: 0px 10rpx 30rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 20rpx;
  padding: 30rpx;
  margin: 30rpx;
}
.item-type-btn{
  padding: 2rpx 10rpx;font-size: 24rpx;border-radius: 10rpx;color:rgba(255,255,255,0.8);
}
</style>
